<template>
    <div>
        <el-card shadow="never" :body-style="{ padding: '20px' }">
            <template #header>
                <div>
                    <h2>
                        财务收支项
                    </h2>
                </div>
            </template>
            <el-form :model="formInline">
                <el-row :gutter="20">
                    <el-col :span="6" :offset="0">
                        <el-form-item label="收支类型">
                            <el-select value-key="" placeholder="请选择收支类型" clearable filterable @change=""
                                v-model="formInline.inOrexpen">
                                <el-option label="收入" value="收入"></el-option>
                                <el-option label="支出" value="支出"></el-option>
                            </el-select>

                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="0">
                        <el-form-item label="收支名称">
                            <el-input v-model="formInline.name" placeholder="请输入收支费用名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" :offset="0">
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                            <el-button type="success" @click="handleJump(1, undefined)">新增</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-divider />
            <el-table :data="tableData" stripe style="width: 100%" :cell-style="{ textAlign: 'center' }"
                :header-cell-style="{ backgroundColor: '#f2f2f2', textAlign: 'center' }">
                <el-table-column label="序号" type="index" width="100" />
                <el-table-column label="名称" prop="name" width="200" />
                <el-table-column label="财务项类别" prop="category" width="200" />
                <el-table-column label="收支类型" prop="inOrexpen" width="200">
                    <template #default="scope">
                        <el-tag :type="scope.row.inOrexpen == '收入' ? '' : 'danger'" size="small" effect="dark">{{
                            scope.row.inOrexpen }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="预定金额" prop="money">
                    <template #default="scope">
                        {{ scope.row.money }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="handleJump(2, scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty description="暂无信息" />
                </template>
            </el-table>
            <el-dialog v-model="dialogFormVisible" :title="num == 1 ? '添加财务项' : '编辑财务项'" draggable width="40%">
                <FinancialForm v-model="dialogFormVisible" :num="num" :Info="Info" v-if="dialogFormVisible"
                    @FinAdd="handleAdd" />
            </el-dialog>

            <div class="pagination" v-if="tableData.length">
                <el-pagination :page-sizes="[5, 10, 20, 40]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" :default-page-size="5" />
            </div>
        </el-card>

    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { BannerType } from '../../types/banner';
import { cloneDeep } from 'lodash';
import { ElMessage, ElMessageBox } from 'element-plus';
import FinancialForm from './components/financial-form.vue'
import { FinancialType } from '../../types/financial';
import { FinDel, FinGet } from '../../api/financial';
// 分页总数
const total = ref<number>(0)
const Pagesize = ref<number>(5)
// 控制
const dialogFormVisible = ref(false)

const formInline = reactive({
    name: '',
    inOrexpen: '',
})
const tableData = ref<BannerType[]>([])
// 获取后端数据
let res = await FinGet()
tableData.value = res.data.results
total.value = res.data.count

// 查询
const onSubmit = async () => {
    let obj = cloneDeep(formInline)
    let res = await FinGet(1, Pagesize.value, obj)
    tableData.value = res.data.results
    total.value = res.data.count
}


// 分页

// 一页显示多少条
const handleSizeChange = async (val: number) => {
    // console.log(val);
    let obj = cloneDeep(formInline)
    let res = await FinGet(1, val, obj)
    tableData.value = res.data.results
    total.value = res.data.count
    Pagesize.value = val
}
// 点击分页
const handleCurrentChange = async (val: number) => {
    // console.log(val);
    let obj = cloneDeep(formInline)
    let res = await FinGet(val, Pagesize.value, obj)
    tableData.value = res.data.results
    total.value = res.data.count
}

//传给组件的数据
let Info = reactive({}) as FinancialType | undefined
// 控制弹窗
const num = ref<number>(1)
const handleJump = (n: number, val: FinancialType | undefined) => {
    dialogFormVisible.value = true
    num.value = n
    Info = val
    // console.log(val);


}

// 删除数据
const handleDel = (i: number, val: FinancialType) => {
    ElMessageBox.confirm(
        '你确定要悄悄删除维修记录吗?',
        '警告提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
        }
    )
        .then(async () => {
            ElMessage({
                type: 'success',
                message: '删除成功,快跑',
            })

            FinDel(val.objectId!).then(async () => {
                tableData.value.splice(i, 1)
                total.value -= 1
                if (tableData.value.length == 0) {
                    let res = await FinGet()
                    tableData.value = res.data.results
                    total.value = res.data.count
                }
            })

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '怂*,  点了不敢删',
            })
        })

}


const handleAdd = (val: any) => {
    console.log(val);
    if (tableData.value.length < 5) {
        tableData.value.push(val);
    }
    total.value += 1
}
</script>

<style scoped lang="scss">
div {
    color: #666;
}

h2 {
    color: #666;
    font-weight: bold;
    padding-left: 15px;
    border-left: 4px solid #00aeff;
    margin-bottom: 10px;
}

.pagination {
    margin-top: 15px;
}
</style>